<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
		<meta name="misapplication-tap-highlight" content="no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>H5XianSun+</title>
		<link rel="stylesheet" href="assets/css/style.css">
		<link rel="stylesheet" href="assets/font/iconfont.css">
		<link rel="stylesheet" href="assets/css/mui.min.css">
		<script src="assets/js/vue.min.js"></script>
		<script src="assets/js/mui.min.js"></script>
		<script src="assets/js/common.js"></script>
		<script src="UpGw/utils.js"></script>
		<script src="assets/js/Bluetooth.js"></script>
		<script src="assets/js/dataBase.js"></script>
</head>
<body>
	<div id="H5_MUI">
		<!-- 弹出层 -->
		<div class="mask" v-show="showMask" v-on:click="hidePop()"></div>
		<div id="popup" class="popup" v-show="popUp" >
			<div class="popup-tab" id="progressbar">{{popTitle}}</div>
			<div class="popup-content">
				<div class="popup-list" v-for="(ble,key) in bluetoothList" :key="key" v-on:click="connectBluetooth(ble.devices[0].deviceId,ble.devices[0].localName)">
					<li class="popup-title">{{ble.devices[0].localName}}</li>
					<div class="popup-list-icon" ><i class="iconfont">&#xe6a4;</i></div>
				</div>
			</div>
			<div class="btn-div">
				<button type="button" class="mui-btn" style="background-color: #00796B;color: #FFFFFF;" v-on:click="hidePop()"> 取消 </button>
			</div>
		</div>
		<!-- 标题栏 -->
		<div class="navigation-bar">
			<div class="navigation-left">
				<div class="navigation-left-title" v-on:click="selCollectAddr()">选择集中器：{{collectAddr}}</div>
			</div>
			<div class="navigation-right">
				<div class="navigation-right-title fs16" v-on:click="searchBluetooth()">
					<i class="iconfont">{{bleStateChangeIcon}}</i>
				</div>
			</div>
		</div>
		<!-- 内容 -->
		<div class="grid-content">
			<ul  id="menu_list">
				<li class="grid-view-item" v-for="(value,key) in menu" :key="key" v-on:click="CommonUtil.clicked(value.url,value.title)">
					<div class="grid-view-item-ico colorA"><i class="iconfont">{{value.icon}}</i></div>
					<div class="grid-view-item-title">{{value.title}}</div>
				</li>
			</ul>
		</div>
		<!--  -->
	</div>
</body>
</html>
<script type="text/javascript">
   		var vm = new Vue({
   			el: '#H5_MUI',
   			data: {
   				menu:[
   					{
   						title:"终端管理",
   						icon:"\ue649",
   						url:"collect.html"
   					},
   					{
   						title:"电表管理",
   						icon:"\ue614",
   						url:"meter.html"
   					},
   					{
   						title:"表箱管理",
   						icon:"\ue60e",
   						url:"box.html"
   					},
   					{
   						title:"数据采集",
   						icon:"\ue6da",
   						url:"getData.html"
   					},
   					{
   						title:"线损计算",
   						icon:"\ue64c",
   						url:"loss.html"
   					},
   				],
   				collectAddr:'000000000000',
   				bleStateChangeIcon:'\ue642',
   				bluetoothList:[],
   				popUp:false,
   				showMask:false,
				interval:'',
				popTitle:'正在搜索蓝牙设备...',
   			},
   			created: function () {
				
				this.plusReady();
				
   			},
   			methods: {
				plusReady:function(){
					var that = this;
					document.addEventListener('plusready', function(){
						that.collectAddr = CommonUtil.getStorage('selCollectAddr')
						that.bleStateChangeIcon = CommonUtil.getStorage('bleSta') ?  '\ue642' : '\uec4a';
						//创建数据库
						DB.openDB(function(data){
							console.log(data);
							if(data == 'fail') mui.toast('数据库访问失败');
						});
						//蓝牙模块状态监听
						BLE.openBluetooth();
						BLE.getBluetoothState(function(data){
							if(data == 'fail') that.bleStateChangeIcon = '\ue642';
						});
						//蓝牙设备链接状态监听
						BLE.BLEConnectionStateChange(function(data){
							console.log(data);
							if(!data) {
								mui.toast('蓝牙设备断开');
								that.bleStateChangeIcon = '\ue642';
							}else{
								that.bleStateChangeIcon = '\uec4a';
							}
						});
					},false);
				},
				searchBluetooth:function(){
					this.showMask = true;
					this.popUp = true;
					this.bluetoothList = [];
					mui("#progressbar").progressbar().show();//loading
					BLE.startBluetoothDiscovery();
					var that = this;
					this.interval = setInterval(() => {
					//	console.log(JSON.stringify(result));
						if(result.length == 0 ) clearInterval(this.interval);
						that.bluetoothList = result;
					},500);
				},
				connectBluetooth:function(deviceId,name){
					this.popTitle = '正在链接蓝牙设备---'+name;
					var that = this;
					BLE.createConnection(deviceId,name,function(data){
						console.log(data)
						if( data == 'linking') {
							that.bleStateChangeIcon = '\uec4a';
							that.showMask = false;
							that.popUp = false;
							result = [];
							clearInterval(this.interval);
							mui("#progressbar").progressbar().hide();
						}
						if(data == 'unlink') mui.toast('蓝牙设备连接失败');
					});
				},
				hidePop:function(){
					this.showMask = false;
					this.popUp = false;
					BLE.stopBluetoothDiscovery();
					clearInterval(this.interval)
					mui("#progressbar").progressbar().hide();
				},
				selCollectAddr:function(){
					CommonUtil.clicked("selCollect.html","选择终端");
				}
   			}
   		})
    </script>